page {
  background-color: #FC9903;
  padding-bottom: 70rpx;
}
button{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%!important;
  border-radius: unset;
  color: #FDFCFF!important;
  font-weight: 500!important;

}
.unlock {
  position: relative;
  .code-mask{
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.6);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    .content{
      width: 540rpx;
      height: 468rpx;
      background: #FEFDF5;
      border-radius: 24rpx;
      padding: 28rpx;
      position: relative;
      display: flex;
      justify-content: center;
      .code-mask-close{
        width: 68rpx;
        height: 68rpx;
        position: absolute;
        bottom:-142rpx;
      }
      >.code{
        position: absolute;
        width: 164rpx;
        height: 164rpx;
        border-radius: 8rpx;
        border: 2rpx solid #FECE78;
        background-color: #fff;
        top: -84rpx;
        image{
          width: 100%;
          height: 100%;
        }
      }
      >.code-in{
        border-radius: 16rpx;
        border: 2px solid #FECE78;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 0 40rpx;
        align-items: center;
        >text{
          font-size: 28rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #434343;
          margin-top: 30rpx;
          text-align: center;
        }
        input{
          width: 100%;
          margin-top: 32rpx;
          height: 92rpx;
          background: #FCF3CB;
          border-radius: 10rpx;
          text-align: center;

          font-size: 28rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #88793D;
        }
        >view{
          width: 300rpx;
          height: 82rpx;
          background: #FFCF00;
          border-radius: 41rpx;
          margin-top: 26rpx;
          display: flex;
          align-items: center;
          justify-content: center;

          font-size: 32rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
        }
      }
    }
  }
  .handler{
    display: flex;
    margin-top: 88rpx;
    justify-content: space-between;
    width: 100%;
    .share{
      color: #333333;
    }
    view{
      height: 92rpx;
      border-radius: 12rpx;
      width: 240rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      &:first-child{
        background: #F5F5F5;
        color: #666666;
      }
      &:last-child{
        background:#FFCF00;
        color: #333333;
      }
    }
  }
  .container {
    display: flex;
    flex-direction: column;
    z-index: 99;
    align-items: center;
    position: relative;
    padding: unset;
    .fight-friend{
      display: flex;
      flex-direction: column;
      width: 100%;
      align-items: center;
      margin-top: 32rpx;
      >text{
        font-size: 32rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
      }
      >view{
        display: flex;
        align-items: center;
        padding: 0 64rpx;
        margin-top: 40rpx;
        flex-wrap: wrap;
        width: 100%;
        view{
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-right: 72rpx;
          margin-bottom: 32rpx;
          &:nth-of-type(4n){
            margin-right: unset;
          }
          text{
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
          }
          image{
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            margin-bottom: 20rpx;
          }
        }
      }
    }
    .lock-box{
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      margin-top: 840rpx;
      padding-bottom: 70rpx;
      overflow: hidden;
      .share-bottom{
        width: 100%;
        height: 314rpx;
        position: absolute;
        bottom: 0;
        z-index: 9999;
      }
      .share-top{
        width: 100%;
        height: 230rpx;
        position: absolute;
        z-index: 9999;

        top: 0;
      }

      >.null{
        background-color: #FFF;
        top: 0;
        width: 686rpx;
        position: relative;
        border-radius: 100rpx;
        >view{
          position: relative;
          z-index: 999999;
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
          >view{
            width: 100%;
            padding: 0 30rpx;
            .button{
              width: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
              .tip{
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
                margin-top: 30rpx;
              }
              view{
                margin-top: 40rpx;
                width: 100%;
                height: 100rpx;
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #333333!important;
                font-size: 32rpx!important;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500!important;
                &.grey{
                  align-items: unset;
                  image{
                    width:658rpx;
                    height: 132rpx;
                  }
                  text{
                    color: #FDFCFF!important;
                    margin-top: 36rpx;
                  }
                }
                &.red{
                  color: #FDFCFF!important;
                  box-shadow: 0px 8rpx 16rpx 0px rgba(255,59,37,0.39);
                }
                image{
                  position: absolute;
                  width: 100%;
                  height: 100%;

                }
                text{
                  position: relative;
                  z-index: 99;
                }
              }
            }
            .item{
              display: flex;
              padding: 32rpx 30rpx;
              margin-top: 50rpx;
              border-radius: 20rpx;
              margin-bottom: 20rpx;
              width: 100%;
              position: relative;
              align-items: center;
              &.doing{
                background: #FFF9E9;
              }
              &.no-doing{
                background: #F6F6FF;
              }
              &.did{
                background: #FFF6ED;
                border: 1rpx solid #EBD4B8;
              }
              .right-top{
                position: absolute;
                top: 0;
                right: 0;
                view{
                  width: 138rpx;
                  height: 46rpx;
                  border-radius: 0px 20rpx 0px 20rpx;
                  display: flex;
                  align-items: center;
                  justify-content: center;

                  font-size: 28rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  &.doing{
                    color: #FFFFFF;
                    background: #F1B419;
                  }
                  &.no-doing{
                    background: #E7E8FD;
                    color: #695EF8;
                  }
                  &.did{
                    background: #DFDFDF;
                    color: #000000;
                  }
                }
                image{
                  width: 60rpx;
                  height: 46rpx;
                  position: absolute;
                  right: 0;
                  top: 0;
                }
              }
              >image{
                width: 114rpx;
                height: 114rpx;
                margin-right: 28rpx;
              }
              .progress{
                display: flex;
                align-items: center;
                >view{
                  width: 414rpx;
                  height: 6rpx;
                  background: #FEF0BB;
                  border-radius: 4rpx;
                  margin-right: 12rpx;
                  position: relative;
                  view{
                    background-color: #F1B419;
                    border-radius: 20rpx;
                    height: 6rpx;
                    left: 0;
                  }

                }
                text{
                  font-size: 28rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #F7CF4E;
                }
              }
              .content{
                display: flex;
                flex-direction: column;
                .name{
                  font-size: 30rpx;
                  font-family: PingFangSC-Medium, PingFang SC;
                  font-weight: 500;
                  color: #000000;
                }
                .count{
                  display: flex;
                  font-size: 28rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  margin-top: 10rpx;
                  color: #A0A0A0;
                  .sum{
                    margin-right: 20rpx;
                  }
                  .jump{
                    margin-right: 12rpx;
                  }
                }
              }
            }

            .header{
              display: flex;
              align-items: center;
              justify-content: center;
              margin-top: 50rpx;
              image{
                width: 60rpx;
                height: 32rpx;
              }
              text{
                font-size: 36rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #7F3413;
                margin: 0 24rpx;
              }
            }
          }
        }

      }
    }
    .unlock-text {
      width: 582rpx;
      height: 266rpx;
      position: absolute;
      top: -64rpx;
      display: flex;
      justify-content: center;
      image {
        width: 100%;
        height: 100%;
      }
      text{
        position: absolute;
        font-size: 32rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        bottom: 16rpx;
      }
    }
  }

  .bgi {
    width: 100%;
    height: 1166rpx;
    position: absolute;
    top: 0;
    left: 0;
  }
}
